import React from 'react';
import { Drawer, Descriptions, Tag, Image, Progress, List, Avatar, Typography } from 'antd';
import { TrophyOutlined, UserOutlined, CalendarOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { SYSTEM } from '@/types/system';

const { Title, Text } = Typography;

interface AchievementDetailProps {
  visible: boolean;
  onClose: () => void;
  achievement: SYSTEM.AchievementModel | null;
  userAchievements?: any[];
}

const AchievementDetail: React.FC<AchievementDetailProps> = ({
  visible,
  onClose,
  achievement,
  userAchievements = [],
}) => {
  if (!achievement) return null;

  const getTypeColor = (type: string) => {
    const colors = {
      learning: 'blue',
      activity: 'green',
      social: 'orange',
      special: 'purple',
    };
    return colors[type as keyof typeof colors] || 'default';
  };

  const getCategoryColor = (category: string) => {
    const colors = {
      bronze: '#CD7F32',
      silver: '#C0C0C0',
      gold: '#FFD700',
      platinum: '#E5E4E2',
      diamond: '#B9F2FF',
    };
    return colors[category as keyof typeof colors] || '#666';
  };

  const getConditionText = (type: string, value: number) => {
    const conditions = {
      course_completion: `完成 ${value} 门课程`,
      study_time: `学习时长达到 ${value} 小时`,
      login_days: `连续登录 ${value} 天`,
      score: `分数达到 ${value} 分`,
      activity_participation: `参与 ${value} 次活动`,
    };
    return conditions[type as keyof typeof conditions] || `达到 ${value}`;
  };

  const completionRate = userAchievements.length > 0 
    ? (userAchievements.filter(ua => ua.achievement_id === achievement.id).length / userAchievements.length) * 100 
    : 0;

  return (
    <Drawer
      title="成就详情"
      width={600}
      open={visible}
      onClose={onClose}
      destroyOnClose
    >
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
          {achievement.icon_url ? (
            <Image
              src={achievement.icon_url}
              alt={achievement.name}
              width={64}
              height={64}
              style={{ marginRight: 16 }}
            />
          ) : (
            <Avatar
              size={64}
              icon={<TrophyOutlined />}
              style={{ 
                backgroundColor: getCategoryColor(achievement.category),
                marginRight: 16 
              }}
            />
          )}
          <div>
            <Title level={3} style={{ margin: 0 }}>
              {achievement.name}
            </Title>
            <div style={{ marginTop: 8 }}>
              <Tag color={getTypeColor(achievement.type)}>
                {achievement.type === 'learning' ? '学习成就' :
                 achievement.type === 'activity' ? '活动成就' :
                 achievement.type === 'social' ? '社交成就' : '特殊成就'}
              </Tag>
              <Tag color={getCategoryColor(achievement.category)}>
                {achievement.category === 'bronze' ? '青铜' :
                 achievement.category === 'silver' ? '白银' :
                 achievement.category === 'gold' ? '黄金' :
                 achievement.category === 'platinum' ? '铂金' : '钻石'}
              </Tag>
            </div>
          </div>
        </div>

        <Descriptions column={1} bordered>
          <Descriptions.Item label="成就描述">
            {achievement.description}
          </Descriptions.Item>
          <Descriptions.Item label="达成条件">
            {getConditionText(achievement.condition_type, achievement.condition_value)}
          </Descriptions.Item>
          <Descriptions.Item label="奖励积分">
            <Text strong style={{ color: '#fa8c16' }}>
              {achievement.points} 积分
            </Text>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">
            {dayjs(achievement.created_at).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            <Tag color={achievement.is_active ? 'success' : 'default'}>
              {achievement.is_active ? '启用' : '禁用'}
            </Tag>
          </Descriptions.Item>
        </Descriptions>
      </div>

      <div style={{ marginBottom: 24 }}>
        <Title level={4}>
          <UserOutlined /> 获得统计
        </Title>
        <div style={{ marginBottom: 16 }}>
          <Text>完成率: {completionRate.toFixed(1)}%</Text>
          <Progress 
            percent={completionRate} 
            style={{ marginTop: 8 }}
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
        </div>
      </div>

      <div>
        <Title level={4}>
          <CalendarOutlined /> 最近获得用户
        </Title>
        <List
          dataSource={userAchievements.slice(0, 5)}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar icon={<UserOutlined />} />}
                title={item.user_name || `用户${item.user_id}`}
                description={`获得时间: ${dayjs(item.achieved_at).format('YYYY-MM-DD HH:mm:ss')}`}
              />
            </List.Item>
          )}
          locale={{ emptyText: '暂无用户获得此成就' }}
        />
      </div>
    </Drawer>
  );
};

export default AchievementDetail;
